<template>
    <u-toast ref="uToast"></u-toast>
    <view class="OrderDeatil">
        <view class="item">
            <!-- 状态栏 -->
            <view class="StatusBar flex_al_cen_ju_bet">
                <view class="Bar flex_al_cen_ju_bet">
                    <view class="Timestatus flex text_ovf">
                        <view class="status">订单已完成</view>
                        <view class="time text_ovf">送达时间：{{ forDate(deltails.itemDelaits.deliveryTime) }}</view>
                    </view>
                </view>
            </view>
            <!-- 地址备注 -->
            <view class="AddR_Cont">
                <AddressDelatils :Type="Type" :item="deltails.itemDelaits" :orderType='0' :TitleShow="TitleShow">
                </AddressDelatils>
                <view class="phoneLayout" @click.stop="onPhoneClick()">
                    <image class="phoneIcon" src="../../static/images/pulice/phone_icon.png"/>
                    <view>联系</view>
                </view>
            </view>
        </view>
        <!-- 外卖 餐品-->
        <view class="item" v-if="Type == 0">
            <view class="Takeout_meal">
                <view class="Title flex_al_cen_ju_bet">
                    <text> {{ deltails.goodsLength }}种 商品
                        <text class="list_text">
                            （共 {{ deltails.goodsNumall }}件 ）
                        </text>
                    </text>
                </view>

                <view class="msg" v-for="(item, index) in deltails.itemDelaits.goodsVOS   " :key="index">
                    <view class="flexs">
                        <view class="name">
                            {{ item.goodsName }} {{ item.goodsSpecification }}
                        </view>
                        <view>x{{ item.goodsNum }}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 跑腿 物品信息 -->
        <view class="item" v-if="Type == 1">
            <view class="deatils">
                <view class="Title"> 物品信息</view>
                <view class="msg">
                    <view class="flex_al_cen_ju_bet" v-if="deltails.itemDelaits.articleType">
                        <view>物品类性</view>
                        <view> {{ deltails.itemDelaits.articleType }}</view>
                    </view>
                    <view class="flex_al_cen_ju_bet" v-if="deltails.itemDelaits.articlePrice">
                        <view>物品价格</view>
                        <view>{{ deltails.itemDelaits.articlePrice }}</view>
                    </view>
                    <view class="flex_al_cen_ju_bet" v-if="deltails.itemDelaits.articleWeight">
                        <view>商品重量</view>
                        <view> {{ deltails.itemDelaits.articleWeight }}</view>
                    </view>
                    <view class="flex_al_cen_ju_bet" v-if="deltails.itemDelaits.articleNum">
                        <view>物品数量</view>
                        <view> {{ deltails.itemDelaits.articleNum }}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 跑腿 备注 -->
        <view class="item" v-if="Type == 1">
            <view class="remarks">
                <view class="Title"> 备注</view>
                <u-textarea height="158rpx" disabled v-model="deltails.itemDelaits.remark"
                            class="margin_t_b"></u-textarea>
            </view>
        </view>
        <!-- 订单数据 -->
        <view class="item">
            <view class="deatils">
                <view class="Title"> 订单信息</view>
                <view class="msg">
                    <view class="flex_al_cen_ju_bet">
                        <view>订单里程</view>
                        <view> {{ deltails.itemDelaits.distance }}km</view>
                    </view>
                    <view class="flex_al_cen_ju_bet">
                        <view>订单编号</view>
                        <view> {{ deltails.itemDelaits.orderSn }}</view>
                    </view>
                    <view class="flex_al_cen_ju_bet" v-if="Type == 0">
                        <view>下单时间</view>
                        <view> {{ forDate(deltails.itemDelaits.orderTime) }}</view>
                    </view>
                    <view class="flex_al_cen_ju_bet" v-if="Type == 1">
                        <view>下单时间</view>
                        <view> {{ forDate(deltails.itemDelaits.createTime) }}</view>
                    </view>
                    <view class="flex_al_cen_ju_bet">
                        <view>送达时间</view>
                        <view> {{ forDate(deltails.itemDelaits.deliveryTime) }}</view>
                    </view>
                    <view class="flex_al_cen_ju_bet">
                        <view>订单备注</view>
                        <view class="H2"> {{ deltails.itemDelaits.remark || '无' }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>

    <!-- 电话联系 弹出层 -->
    <c-phone-mask-list :orderId="phoneBtnList.orderId" :phone="phoneBtnList.riderPhone" :mapType="false"
                       :phoneListShow="phoneListShow"
                       :phoneBtnList="phoneBtnList.arr" @btnCancel="btnCancel"></c-phone-mask-list>
</template>
<script setup lang="ts">
import {ref, getCurrentInstance, defineProps} from "vue";
import {forDate} from '@/utlis/time'
import {onShow} from "@dcloudio/uni-app";
import OrderDeatil from "@/Hooks/Order/OrderDeatil";

const {proxy} = getCurrentInstance() as any;
const TitleShow = ref<boolean>(false) // 控制订单文字显示
interface Props {
    Type?: number; //
    orderType?: number
    id: number | string
}

const Props = defineProps<Props>();
const Type = Props.Type
const orderType = Props.orderType
const {
    thisOrderDeltails, deltails, runErrandsDeltails,
    onPhoneClick, btnCancel, phoneBtnList, phoneListShow
} = OrderDeatil(proxy,Type);

onShow(() => {
    let id = Props.id
    if (Props.Type == 0) {
        thisOrderDeltails(id)
    } else {
        runErrandsDeltails(id)
    }
});

</script>
<style scoped lang="scss">
@import "../../static/css/Order/OrderDeatil.scss";
</style>
